<template>
  <view class="search-page">
    <u-search placeholder="请输入你想搜索的内容" :showAction="false"  v-model="searchValue"
      @search="handleSubmit"></u-search>
    <view class="search-wrap">
      <view class="history-wrap" v-if="historyWords.length > 0">
        <view class="search-header">
          <text class="search-title">历史搜索</text>
          <text class="search-clear" @click="handleClearHistory">清除</text>
        </view>
        <view class="search-content">
          <view class="search-item" hover-class="hover-history-item" v-for="(item, index) in historyWords"
            @click="handleHistoryTap(item, index)" :key="index">
            {{ item }}
          </view>
        </view>
      </view>
      <view class="popular-wrap">
        <view class="search-header">
          <text class="search-title">热门搜索</text>
        </view>
        <view class="search-content">
          <view class="search-item" hover-class="hover-history-item" v-for="(item, index) in popularWords"
            @click="handlePopularTap(item)" :key="index">
            {{ item }}
          </view>
        </view>
      </view>
    </view>
    <u-modal :show="dialogShow" :content='dialog.message' :showCancelButton="true" @cancel="dialogShow = false"
      @confirm="confirm"></u-modal>

  </view>
</template>
<script>
export default {
  data() {
    return {
      type: '',
      storeId: '',
      historyWords: [],
      popularWords: [],
      searchValue: '',
      dialog: {
        title: '确认删除当前历史记录',
        showCancelButton: true,
        message: '',
      },
      dialogShow: false,
      deleteType: 0,
      deleteIndex: '',
    }
  },

  onLoad(options) {
    this.type = options.type
    this.storeId = options.storeId
  },
  onShow() {
    const newHistoryWords = Array.from(new Set(uni.getStorageSync('historyWords'))) || []
    this.historyWords = newHistoryWords
    this.queryPopular()
  },
  methods: {
    async queryPopular() {
      try {
        const result = await this.$request.miniSearchKey();
        this.popularWords = result.data
      } catch (error) {
        console.error(error);
      }
    },
    handleSubmit(value) {
      const { historyWords, storeId, type } = this;
      if (value.length === 0) return;
      if (historyWords.length < 12) {
        historyWords.unshift(value);
      } else {
        historyWords.pop();
        historyWords.unshift(value);
      }
      let newHistoryWords = Array.from(new Set(historyWords));
      uni.setStorageSync('historyWords', newHistoryWords);
      this.historyWords = newHistoryWords;
      this.$goPath(2, `/pages/premiumBag/goods/result?searchValue=${value}&type=${type}&storeId=${storeId}`)
    },
    handleHistoryTap(value, index) {
      console.log(value)
      const { historyWords, type, storeId } = this;
      const _searchValue = historyWords[index || 0] || '';
      if (_searchValue) {
        if (historyWords.length < 12) {
          historyWords.unshift(value);
        } else {
          historyWords.pop();
          historyWords.unshift(value);
        }
        let newHistoryWords = Array.from(new Set(historyWords));
        uni.setStorageSync('historyWords', newHistoryWords);
        this.historyWords = newHistoryWords
        this.$goPath(2, `/pages/premiumBag/goods/result?searchValue=${value}&type=${type}&storeId=${storeId}`)
      }
    },
    handlePopularTap(value) {
      const { popularWords, historyWords, type, storeId } = this;
      const _searchValue = popularWords[value.index || 0] || '';
      if (_searchValue) {
        if (historyWords.length < 12) {
          historyWords.unshift(_searchValue);
        } else {
          historyWords.pop();
          historyWords.unshift(_searchValue);
        }
        uni.setStorageSync('historyWords', historyWords);
        this.historyWords = historyWords
        this.$goPath(2, `/pages/premiumBag/goods/result?searchValue=${_searchValue}&type=${type}&storeId=${storeId}`)
      }
    },
    handleClearHistory() {
      const { dialog } = this;
      this.deleteType = 1;
      this.dialog = {
        ...dialog,
        message: '确认删除所有历史记录',
      }
      this.dialogShow = true
    },
    confirm() {
      const { historyWords } = this;
      const { deleteType, deleteIndex } = this;
      historyWords.splice(deleteIndex, 1);
      if (deleteType === 0) {
        this.dialogShow = false
        this.historyWords = historyWords
      } else {
        this.historyWords = []
        this.dialogShow = false
      }
    },
  },
}
</script>
<style scoped>
page{
  background-color: #fff;
}
.search-page {
  width: 100vw;
  height: 100vh;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #fff;

}

.search-page .t-class__input-container {
  height: 64rpx !important;
  border-radius: 32rpx !important;
}

.t-search__placeholder {
  color: #666 !important;
  font-size: 28rpx !important;
}

.search-page .t-search__input {
  font-size: 28rpx !important;
  color: #333 !important;
}

.search-page .search-wrap {
  margin-top: 44rpx;
}

.search-page .history-wrap {
  margin-bottom: 20px;
}

.search-page .search-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.search-page .search-title {
  font-size: 30rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 42rpx;
}

.search-page .search-clear {
  font-size: 24rpx;
  font-family: PingFang SC;
  line-height: 32rpx;
  color: #999999;
  font-weight: normal;
}

.search-page .search-content {
  /* overflow: hidden; */
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 24rpx;
}

.search-page .search-item {
  /* min-width: 44rpx;*/
  width: 155rpx;
  color: #999999;
  font-size: 24rpx;
  line-height: 32rpx;
  font-weight: normal;
  margin-right: 30rpx;
  margin-bottom: 24rpx;
  background: #F8F8F8;
  border-radius: 28rpx;
  padding: 10rpx 24rpx;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-page .search-item:nth-child(4),
.search-page .search-item:nth-child(8),
.search-page .search-item:nth-child(12) {
  margin-right: 0;
}

.search-page .hover-history-item {
  position: relative;
  top: 3rpx;
  left: 3rpx;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1) inset;
}

.add-notes__confirm {
  color: #fa4126 !important;
}
</style>